<template>
  <!-- 导入题库成功 -->
  <el-dialog
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    title="导入题库"
    :visible="open"
    width="542px"
    append-to-body
    @close="cancel()"
    custom-class="custom-dialog-2"
  >
    <div class="repeatTip">
      导入成功<span>{{ total }}</span
    >题
    </div>
    <div class="repeatBox flex">
      <div
        v-for="(item, index) in repeats"
        :key="index"
        class="repeatItem rela"
      >
        <div class="repeatItem_color" :style="{ background: item.color }"></div>
        <div class="repeatItem_type">{{ item.type }}</div>
        <div class="repeatItem_num">{{ item.num }}</div>
      </div>
    </div>
    <div slot="footer" class="dialog2-dialog-footer">
      <div v-preventReClick @click.stop="back" class="cancel_btn">返回题库</div>

      <div
        v-preventReClick
        type="primary"
        class="confirm2_btn"
        @click.stop="continueImporting"
      >
        继续导入
      </div>
    </div>
  </el-dialog>
</template>

<script>
export default {
  props: {
    open: Boolean,
    topicNums: Object,
    componentType: [String, Number]
  },
  data() {
    return {
      total: 0,
      repeats: [
        { type: '选择题', key: 'singleChoiceCount', num: 0, color: '#6796FF' },
        {
          type: '多选题',
          key: 'multipleChoiceCount',
          num: 0,
          color: '#F36E63'
        },
        { type: '判断题', key: 'trueFalseCount', num: 0, color: '#6BCF86' },
        { type: '填空题', key: 'fillBlankCount', num: 0, color: '#F9C155' },
        { type: '简答题', key: 'shortAnswerCount', num: 0, color: '#53D2C6' },
        { type: '操作题', key: 'operationCount', num: 0, color: '#A967FF' }
      ]
    }
  },
  watch: {
    open(e) {
      if (e) {
        console.log(this.topicNums)
        this.total = this.topicNums.totalCount
        for (let i = 0; i < this.repeats.length; i++) {
          this.repeats[i].num = this.topicNums[this.repeats[i].key]
            ? this.topicNums[this.repeats[i].key]
            : 0
        }
      }
    }
  },
  methods: {
    // 取消按钮
    cancel() {
      this.$emit('update:open', false)
    },
    continueImporting() {
      this.$emit('update:open', false)
      this.$emit('continueImporting')
    },
    // 返回题库预留
    back() {
      this.$emit('update:open', false)
      if (this.componentType == 2) {
        this.$router.go(-1)
      } else {
        this.$emit('backTopic')
      }
    }
  },
  created() {
  },
  mounted() {
  }
}
</script>

<style scoped lang="scss">
@mixin btn_plain($bg_color, $color) {
  background: $bg_color;
  color: $color;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  user-select: none;

  &:active,
  &:hover {
    background: darken($bg_color, 5%);
    color: darken($color, 18%);
  }

  &:disabled {
    background: lighten($bg_color, 5%);
    color: lighten($color, 40%);
  }

  @content;
}

@import "../../../assets/styles/mixin.scss";
.cancel_btn {
  @include btn_plain(#ffffff, #666666) {
    margin: 0 0 0 0;
    width: 88px;
    text-align: center;
    height: 32px;
    line-height: 32px;
    box-sizing: border-box;
    border-radius: 8px;
    border: 1px solid #edeff0;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC, sans-serif;
    font-weight: 400;
  }
}

.confirm1_btn {
  @include plain_hover(rgba(40, 178, 139, 0.2), #28b28b, #ffffff) {
    width: 80px;
    height: 32px;
    line-height: 32px;
    border-radius: 8px;
    border: 1px solid #28b28b;
    font-family: PingFangSC, PingFang SC, sans-serif;
    font-weight: 400;
    font-size: 14px;
    font-style: normal;
    margin-left: 16px;
  }

  .btn_icon {
    color: #28b28b;
    width: 16px;
    height: 16px;
    margin-right: 4px;
  }

  &:hover {
    .btn_icon {
      color: #ffffff;
    }
  }

  &:active {
    .btn_icon {
      color: #ffffff;
    }
  }
}

.confirm2_btn {
  @include btn_plain(#28b28b, #ffffff) {
    margin: 0 0 0 16px;
    width: 88px;
    text-align: center;
    height: 32px;
    line-height: 32px;
    box-sizing: border-box;
    border-radius: 8px;
    border: 1px solid #edeff0;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC, sans-serif;
    font-weight: 400;
  }
}

::v-deep .custom-dialog-2 .el-dialog__footer {
  padding: 0 40px 24px 40px !important;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

::v-deep .custom-dialog-2 .el-dialog__footer .dialog1-dialog-footer {
  display: flex;
}

::v-deep .custom-dialog-2 .el-dialog__footer .dialog2-dialog-footer {
  display: flex;
}

::v-deep .custom-dialog-2 .el-dialog__body {
  padding: 16px 40px 51px 40px !important;
}

.repeatTip {
  font-family: PingFangSC, PingFang SC, sans-serif;
  font-weight: 500;
  font-size: 14px;
  color: #333333;
  line-height: 20px;
  text-align: left;
  font-style: normal;
  margin-bottom: 16px;

  span {
    color: #28b28b;
  }
}

.repeatBox {
  .repeatItem:nth-of-type(3n) {
    margin: 0 0 10px 0;
  }

  .repeatItem {
    margin: 0 30px 10px 0;
    box-sizing: border-box;
    padding: 10px 0 0 36px;
    width: 134px;
    height: 72px;
    background: #f5f7f9;
    border-radius: 8px;

    .repeatItem_color {
      position: absolute;
      top: 16px;
      left: 0;
      width: 12px;
      height: 12px;
    }

    .repeatItem_type {
      font-family: PingFangSC, PingFang SC, sans-serif;
      font-weight: 400;
      font-size: 16px;
      color: #333333;
      line-height: 22px;
      text-align: left;
      font-style: normal;
    }

    .repeatItem_num {
      margin-top: 6px;
      font-family: PingFangSC, PingFang SC, sans-serif;
      font-weight: 500;
      font-size: 20px;
      color: #333333;
      line-height: 28px;
      text-align: left;
      font-style: normal;
    }
  }
}
</style>
